<template>
  <div id="body" class="resumePool">
    <div id="container">
      <div class="sidebar" v-if="resumePoolCategory.length">
        <div id="options" class="greybg">
          <dl>
            <dt>我发布的岗位</dt>
            <dd>
              <div :class="positionId == item.position_id && 'active'"
                v-for="(item,index) in resumePoolCategory"
                :key="index"
                @click="filteResume(item.position_id)"
              >{{item.position_title || item.job_title}}</div>
            </dd>
          </dl>
        </div>
      </div>
      <div class="content">
        <ul class="reset resumeLists" v-if="workerPool.length" style="min-height:60vh">
          <li
            v-for="(item,index) in workerPool"
            :key="index"
            data-id="1686182"
            class="onlineResume"
            style="padding:0;margin-bottom:5px;"
            @click="toWhere('resumeDetail',{worker_id:item.worker_id})"
          >
            <div class="resumeShow" style="margin:0">
              <a
                title="预览在线简历"
                class="resumeImg"
                href="javascript:void(0)"
              >
                <img :src="item.worker_avatar" />
              </a>
              <div class="resumeIntro">
                <h3 class="unread">
                  <a
                    href="javascript:void(0)"
                  >{{item.worker_nickname}}</a>
                  <!-- <em></em> -->
                </h3>
                <!-- <span class="fr">投递时间：2014-07-01 17:08</span> -->
                <div>
                   {{genderArr[item.worker_gender]}} / {{educationArr[item.worker_education]}} / {{item.worker_experience > 0 ?(item.worker_experience+'年'):'无经验'}}
                  <br />
                  出生日期：{{item.worker_birthday}}
                </div>
                <div class="jdpublisher">
                  <span>
                    应聘职位：
                    <a
                      :title="item.position_title"
                      href="javascript:void(0)"
                    >{{item.position_title}}</a>
                  </span>
                </div>
              </div>
              <!-- <div class="links">
                <a
                  data-deliverid="1686182"
                  data-name="jason"
                  data-positionid="149594"
                  data-email="888888888@qq.com"
                  class="resume_notice"
                  href="javascript:void(0)"
                >通知面试</a>
                <a data-deliverid="1686182" class="resume_refuse" href="javascript:void(0)">不合适</a>
                <a data-deliverid="1686182" class="resume_caninterview" href="javascript:void(0)">待定</a>
                <a
                  data-positionname="随便写"
                  data-deliverid="1686182"
                  data-positionid="149594"
                  data-resumekey="1ccca806e13637f7b1a4560f80f08057"
                  data-forwardcount="1"
                  class="resume_forward"
                  href="javascript:void(0)"
                >
                  转发
                  <span>(1人)</span>
                </a>
              </div>-->
            </div>
          </li>
        </ul>
        <Empty v-if="workerPool.length == 0" content="暂无相关简历信息~"></Empty>
        <div class="clear"></div>
        <el-pagination v-if="workerPool.length" background layout="prev, pager, next" :page-size="20" :total="listTotal"></el-pagination>
      </div>
    </div>
    <!-- end #container -->
  </div>
  <!-- end #body -->
</template>

<script>
import { ResumePool, ResumePoolCategory } from "~/api/allRequest";
import Empty from "~/components/empty/empty"

export default {
  name: "resumePool",
  data() {
    return {
      genderArr: ["性别未知", "男", "女"],
      educationArr: [
        "未知",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ],
      listTotal: 0,
      currentPage: 0,
      workerPool: [],
      resumePoolCategory: [],
      positionId:0
    };
  },
  components: {Empty},
  beforeCreate() {},
  created() {
    this.$store.dispatch("changeTabName", "resumePool");
  },
  beforeMount() {},
  mounted() {
    this.getPoolData();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    getPoolData(positionId = "") {
      let currentPage = this.currentPage;
      ResumePool({ page: ++currentPage, positionId })
        .then(result => {
          let { workerPool, page } = result;
          this.listTotal = page.pageTotal * page.pageNum;
          if ((currentPage = 1)) {
            this.workerPool = workerPool;
          } else {
            for (let i = 0; i < workerPool.length; i++) {
              this.workerPool.push(workerPool[i]);
            }
          }
          this.page = currentPage;
        })
        .catch(err => {
          console.log(err);
        });
      ResumePoolCategory()
        .then(result => {
          this.resumePoolCategory = result;
        })
        .catch(err => {
          console.log(err);
        });
    },
    filteResume(position_id) {
      this.currentPage = 0;
      this.positionId = position_id
      this.getPoolData(position_id);
    },
    toWhere(name,json){
      if(json){
        this.$router.push({name,query:json})
      }else{
        this.$router.push({name})
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../../public/less/main.less";

.resumePool {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background: white;
  #options{
    .active{
      background: #91cebe;
      color: white;
    }
  }
  .swiperAdvertize {
    width: 60%;
    height: 100vh;
    .el-carousel__item {
      .imageBlock {
        width: 100%;
        height: 100%;
        .img {
          width: 100%;
        }
      }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}
.ui-autocomplete {
  width: 488px;
  background: #fafafa !important;
  position: relative;
  z-index: 10;
  border: 2px solid #91cebe;
}

.ui-autocomplete-category {
  font-size: 16px;
  color: #999;
  width: 50px;
  position: absolute;
  z-index: 11;
  right: 0px;
  /*top: 6px; */
  text-align: center;
  border-top: 1px dashed #e5e5e5;
  padding: 5px 0;
}

.ui-menu-item {
  *width: 439px;
  vertical-align: middle;
  position: relative;
  margin: 0px;
  margin-right: 50px !important;
  background: #fff;
  border-right: 1px dashed #ededed;
}

.ui-menu-item a {
  display: block;
  overflow: hidden;
}
</style>
